<!-- Breadcrumb 面包屑 组件 -->
<template>
  <div class="breadcrumb_view">
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item
        v-for="(item, index) in breadCrumbArr"
        :key="index"
        :to="item.path"
        >{{ item.name }}</el-breadcrumb-item
      >
    </el-breadcrumb>
  </div>
</template>

<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import Store from "@/store/index";
import { storeToRefs } from "pinia";
import { useRoute } from "vue-router";
const store = Store();
//解构出面包屑数据
const { breadCrumbArr } = storeToRefs(store.useBreadcrumb);
const route = useRoute();

//监听路由变化
watch(
  () => route.path,
  (newPath) => {
    store.useBreadcrumb.setBreadCrumbArr(route.matched);
  },
  { deep: true, immediate: true }
);
</script>
<style lang="scss" scoped>
.breadcrumb_view {
  height: 60px;
  display: flex;
  align-items: center;
}
</style>
